<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script type="text/javascript" src="${pageContext.request.contextPath}/page/third/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/page/third/jcloud/js/jqcloud-1.0.4.min.js"></script>
<link rel="stylesheet"type="text/css" href="${pageContext.request.contextPath}/page/third/jcloud/css/jqcloud.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/third/bootstrap/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/third/bootstrap/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/style/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/style/css/home.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/third/jquerytime/css/about.css" />

<script type="text/javascript" src="${pageContext.request.contextPath}/page/third/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/page/third/jquerytime/js/jquery.min_v1.0.js" type="text/javascript"></script>
<style type="text/css">
.page { width:100%;background:#F0F0F0 url('${pageContext.request.contextPath}/page/third/jquerytime/img/dian2.png') repeat-x; }
</style>
<script type="text/javascript">
var word_list = [
                 {text: "ifxoxo.com", weight: 13},
                 {text: "520xmn.com", weight: 10.5},
                 {text: "jquery", weight: 9.4},
                 {text: "jqcloud", weight: 1},
                 {text: "ifxoxo1", weight: 1.2},
                 {text: "ifxoxo1", weight: 1.2},
                 {text: "ifxoxo1", weight: 3.2},
                 {text: "ifxoxo1", weight: 4.2},
                 {text: "ifxoxo1", weight: 9.2},
                 {text: "ifxoxo1", weight: 6.2},
                 {text: "ifxoxo1", weight: 3.2},
                 {text: "ifxoxo1", weight: 1.2},
                 {text: "ifxoxo1", weight: 6.2},
           ];
$(function() {
	$(document).scroll(function(){
		var window_H = $(window).height();
		// 当屏幕滚出第一屏时，我们让这个按钮出现。
		var h2 = $(document).scrollTop();
		// 判断
		if( h2 >= window_H){
			// 当第一屏即将要滚出去的时候我们要显示返回顶部按钮
			$('.back_top').css('display','block');
		}else{
			$('.back_top').fadeOut(400);
		}
	});
	// 点击图片按钮的时候让我们的页面返回到顶部
	$('.back_top').click(function(){
		$('html,body').animate({'scrollTop':0});
	});	
	$('.back_top').hover(function(){
		$('.back-to-top').hide();
		$('#back_top_font').show();		
	},function(){
		$('.back-to-top').show();
		$('#back_top_font').hide();
	});	
	$("#my_words").jQCloud(word_list);
	$('label').click(function(){
		$('.event_year>li').removeClass('current');
		$(this).parent('li').addClass('current');
		var year = $(this).attr('for');
		$('#'+year).parent().prevAll('li').slideUp(800);
		$('#'+year).parent().slideDown(800).nextAll('li').slideDown(800);
	});	
});
</script>
</head>
<body class="nav-fixed" >
		<!--导航条  -->
 		<jsp:include page="/home_nav.jsp"></jsp:include>

		  <!--主页面  -->
		  <div id="zyn-bodyer"></div>
      <div class="container theme-showcase" role="main">		  	       
		    <div class='col-md-9 main'>
		    <!--面包屑导航  -->
			  <ol class="breadcrumb">
				  <li><a href="#">Home</a></li>
				  <li><a href="#">2013</a></li>
				  <li class="active">十一月</li>
			  </ol>	
			  
 			<div class="box">
				<ul class="event_year">
					<li class="current"><label for="2013">2013</label></li>
					<li><label for="2012">2012</label></li>
					<li><label for="2011">2011</label></li>
					<li><label for="2010">2010</label></li>
					<li><label for="2009">2009</label></li>
					<li><label for="2008">2008</label></li>
					<li><label for="2007">2007</label></li>
					<li><label for="2006">2006</label></li>
					<li><label for="2005">2005</label></li>
					<li><label for="2004">2004</label></li>
					<li><label for="2003">2003</label></li>
					<li><label for="2002">2002</label></li>
				</ul>
				<ul class="event_list">
						<li><h3 id="2013">2013</h3>
						</li>
						<li>
						<span>5月</span>
						<p><span>文字信息</span></p>
						</li>
						<li>
						<span>4月</span>
						<p><span>文字信息，文字信息</span></p>
						</li>
						<li>
						<span>3月</span>
						<p><span>文字信息</span></p>
						</li>
						<li>
						<h3 id="2012">2012</h3>
						</li>
						<li>
						<span>9月</span>
						<p><span>文字信息</span></p>
						</li>
						<li>
						<h3 id="2011">2011</h3>
						</li>
							<li><span>3月13日</span><p><span>文字信息46</span></p></li>
					<li><span>3月26日</span><p><span>文字信息45</span></p></li>
					<li><span>4月-11月</span><p><span>文字信息44</span></p></li>
					<li><span>6月11日</span><p><span>文字信息43</span></p></li>
					<li><span>9月10日</span><p><span>文字信息42</span></p></li>
				</ul>

	   </div>
 
</div>	
	  
		    <div class='col-md-3 sidebar'>
		    <!--侧边栏目  -->
 			<jsp:include page="/aside.jsp"></jsp:include>	    			        					    			
		    </div>	  
		</div>	
</body>

</html>
